<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .roll {
        width: 740px;
        height: 200px;
        border: 1px solid #333;
        margin: 0 auto
    }
    
    .roll .box {
        width: 540px;
        overflow: hidden;
        float: left;
    }
    
    .roll .prev,
    .roll .next {
        width: 100px;
        height: 200px;
        background-color: #ed5fff;
        float: left
    }
    
    .roll ul {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 880px;
        height: 200px;
    }
    
    .roll li {
        width: 100px;
        height: 200px;
        float: left;
        background-color: #eee;
        margin-right: 10px;
    }
    </style>
</head>

<body>
    <div class="roll">
        <div class="prev"></div>
        <div class="box">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        </div>
        <div class="next"></div>
    </div>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
    	(function(){
	    	var b = true;
	    	$('.roll .next').click(function () {
	    		if (!b) return;
	    		b = false;
	    		$('.roll ul').animate({'margin-left': -110}, function () {
	    			$('.roll li:first-child').appendTo( $('.roll ul'));
	    			$(this).css('margin-left', 0);
	    			b = true;
	    		});
	    	});
	    	$('.roll .prev').click(function () {
	    		if (!b) return;
	    		b = false;
	    		$('.roll li:last-child').prependTo( $('.roll ul'));
	    		$('.roll ul').css('margin-left', -110);
	    		$('.roll ul').animate({'margin-left': 0},function(){
b = true;
	    		});
	    		
	    	});
    	})();
    </script>
</body>

</html>
